<template>
    <el-form label-position="right" class="zw-form-layout">
        <el-row :gutter="24">
            <el-col :span="8">
                <el-form-item>
                    <el-input
                        v-model="ruleForm.keywords"
                        :placeholder="options[ruleForm.searchType == 2 ? 1 : 0].label"
                        class="input_with_select">
                        <template #prepend>
                            <el-select v-model="ruleForm.searchType">
                                <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </template>
                    </el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="商户状态">
                    <el-select v-model="ruleForm.status">
                        <el-option label="全部状态" value="" />
                        <el-option
                            v-for="item in shopOpenStatus"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
            </el-col>
            <template v-if="defaultExpand">
                <el-col :span="8">
                    <el-form-item label="认证状态">
                        <el-select v-model="ruleForm.identStatus">
                            <el-option label="全部状态" value="" />
                            <el-option
                                v-for="item in shopAuthStatus"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="注册时间">
                        <el-date-picker
                            v-model="ruleForm.date"
                            @change="onDateChange"
                            type="daterange"
                            format="YYYY-MM-DD"
                            value-format="YYYY-MM-DD HH:mm:ss"
                            :default-time="defaultDateRange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期" />
                    </el-form-item>
                </el-col>
            </template>
            <el-col>
                <el-button type="primary" @click="onSearch(ruleFormRef)">查询</el-button>
                <el-button plain @click="onReset(ruleFormRef)">清空</el-button>
                <el-button
                    v-if="defaultExpand"
                    class="icon_btn"
                    :text="true"
                    type="primary"
                    @click="defaultExpand = !defaultExpand">
                    收起<el-icon><ArrowUp /></el-icon>
                </el-button>
                <el-button v-else class="icon_btn" :text="true" type="primary" @click="defaultExpand = !defaultExpand">
                    展开<el-icon><ArrowDown /></el-icon>
                </el-button>
            </el-col>
        </el-row>
    </el-form>
</template>

<script setup>
import { packSelectObjUtil } from '@/commons/utils.js';
import constants from '@/commons/constants';
import storage from '@/commons/storage';
import { onActivated, reactive, ref } from 'vue';
const emit = defineEmits(['search', 'reset']);
const options = [
    { label: '商户名称/商户ID', value: 1 },
    { label: '联系人姓名/手机号', value: 2 }
];
const shopOpenStatus = packSelectObjUtil(constants.SHOP_OPEN_STATUS);
const shopAuthStatus = packSelectObjUtil(constants.SHOP_AUTH_STATUS);
const defaultDateRange = [new Date(0, 0, 0, 0, 0, 0), new Date(0, 0, 0, 23, 59, 59)];
const defaultExpand = ref(false);
const ruleFormRef = ref();
const ruleForm = reactive({
    identStatus: '', //'认证状态1:未认证;2已认证;3:待审核;4:已驳回',
    searchType: 1, //'搜索类型 1-商户名称、商户ID 2-联系人姓名、电话',
    keywords: '',
    status: '', //'商户状态1:已启用;2-已禁用;3:待审核;4:已驳回',
    createdStartAt: '',
    createdEndAt: '',
    date: []
});

const onDateChange = v => {
    v || (ruleForm.date = []);
};
const onSearch = () => {
    let result = {};
    for (const [key, value] of Object.entries(ruleForm)) {
        result[key] = value;
    }
    const date = result.date || ['', ''];
    result.createdStartAt = date[0];
    result.createdEndAt = date[1];
    delete result.date;
    emit('search', result);
};
const onReset = () => {
    ruleForm.identStatus = '';
    ruleForm.searchType = 1;
    ruleForm.keywords = '';
    ruleForm.status = '';
    ruleForm.createdStartAt = '';
    ruleForm.createdEndAt = '';
    ruleForm.date = [];
    let result = {};
    Object.assign(result, ruleForm);
    delete result.date;
    emit('reset', result);
};
onActivated(() => {
    const SEARCH_RESET = storage.get('SEARCH_RESET');
    SEARCH_RESET ? onReset() : onSearch();
    storage.set('SEARCH_RESET', true);
});
</script>
<style lang="scss" scoped>
.el-form {
    padding: 16px 24px 16px 18px;
    margin-bottom: 16px;

    .el-row {
        margin: -8px -10px;

        .el-col {
            margin: 8px 0;

            &:last-of-type {
                flex: auto;
                text-align: right;
            }

            .el-form-item {
                margin-bottom: 0;

                .el-form-item__label-wrap {
                    .el-form-item__label {
                        font-size: 14px;
                        font-family: STHeitiSC-Light, STHeitiSC;
                        font-weight: 300;
                        color: #33302d;
                    }
                }

                .el-form-item__content {
                    .el-input,
                    .el-select,
                    .el-date-editor {
                        width: 100%;
                    }
                }
                .input_with_select {
                    :deep(.el-input-group__prepend) {
                        width: 168px;
                        padding: 0;
                        background-color: #fff;
                    }
                }
            }

            .el-button--text {
                border: 1px solid transparent;
            }
            .icon_btn {
                padding: 0;
                margin-left: 8px;
                .el-icon {
                    margin-left: 5px;
                }
            }
        }
    }

    &__cascader-panel {
        display: none;
    }
}
</style>
